<template>
  <div>
    <div>
        <el-col class="flex" :span="7">
          <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in searchlist"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

  <input class="input1"  placeholder="请输入" v-model="option.keyWord" @keydown.13 = "toSearch" type="text">
          


        </el-col>


                <el-col class="flex  margin50" :span="4 ">
                    <!-- <div  style="width: 50px; line-height: 50px; ">  <span>状态:</span> </div> -->
                    <el-checkbox-group @change="change"  v-model="checkboxStatus">
                        <el-checkbox-button v-for="(city , index) in checkboxGroup1"  :label="city.status" :key="city.name">{{city.name}}</el-checkbox-button>
                </el-checkbox-group>
             </el-col>

             <el-col class="flex  " :span="7">
              <el-date-picker
      v-model="CreateDate"
      type="daterange"
      value-format="yyyy-MM-dd HH:mm:ss" 
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
            </el-col>
            <el-col class="flex  " :span="4">
            <el-button type="primary" icon="el-icon-search"  size="small" @click="toSearch">搜索</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="reset">重置</el-button>
            </el-col>
     
    </div>
    <el-table
    height="400"

    :data="tableData"
    border
    style="width: 100%  ;  ">

    <el-table-column
    fixed
      prop="orderSn"
      label="订单号"
      width="120">
    </el-table-column>


    <el-table-column
   
      prop="CreateDate"
      label="日期"
      width="150">
     <template  slot-scope="scope" >
      <div>
          {{scope.row.CreateDate  | mytime }}
      </div>
     </template>

    </el-table-column>




    <el-table-column
      prop="novel.name"
      label="小说名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="actualPrice"
      label="价格"
      width="120">
    </el-table-column>
   
    <el-table-column
      prop="userId.username"
      label="用户"
      width="300">
    </el-table-column>
    <el-table-column
      prop="shareUserId"
      label="代理"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
  background
  @current-change="changpage"
  layout="prev, pager, next"
  :page-size="option.size"
  :total="total">
</el-pagination>



  </div>
</template>

<script>
import {orderlist } from '@/api/order'
  export default {
        data(){ 

            return { 
              value:"0",
              searchlist:[
              {
          value: '0',
          label: '综合搜索'
        }, {
          value: 'orderSn',
          label: '订单'
        }, {
          value: 'shareUserId',
          label: '代理'
        }, 
        
        {
          value: 'userId',
          label: '用户'
        },
        {
          value: 'novel.name',
          label: '小说名'
        },
       ],
                // AndWhere:{    OderSn:[ input的值  ]  }
                // AndWhere:{    agent:[ input的值  ]  }
                CreateDate:[],
                checkboxStatus:[],
                  checkboxGroup1:[ {  name:"待付款" , status:0  } , {  name:"已付款" , status:3  }],
                  time:["2022-11-09 00:00:00", "2022-12-30 23:59:59"],
              total:35,
              tableData:[],
              option:{ 
                page:1,
                size:15,
                keyWord:"",
                AndWhere:{ 
            
              
                },
                // where:  { 
                //   CreateDate:[]
                // }

               } 
            }
        },  
     async   created() {
              this.renderDate()
        },
        methods: {
       async   renderDate(){

        let newoptins =  JSON.parse( JSON.stringify(this.option) )
          if(this.value !="0"){
            // 说明是综合搜索
              let  v = this.option.keyWord
              newoptins.keyWord=""
              newoptins.AndWhere[this.value] = [v]
          }

          let { data}   =  await orderlist(newoptins)
          console.log( "返回的数据",data);
            this.tableData = data.list

            console.log(this.tableData);
        this.total = data.pagination.total
          }

          ,
         async changpage(val){
              console.log(val);
              this.option.page = val 
             await this.renderDate()
          },
         async toSearch(){
          await this.renderDate()
             
          },
          async reset(){

          },
         async change(val){
            console.log(val);
            if(val.length>0){
              this.option.AndWhere.status = val
            }else{
              this.option.AndWhere = {}
            }
          
             await this.renderDate()
          }
        },
  }
</script>

<style lang="scss" scoped>
.content{
    padding: 30px;
}
.flex{
    display: flex;
    align-items: center;
}

// .margin50{
//     margin-left: 20px;
// }
.search{

}
.input1 {
  -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
    &:hover{

      border-color:#409eff ;
    }
}


.money{
  font-size: 7px;
  span{
    margin: 0 5px;
  }
}


</style>